<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>期中考试</title>
</head>
<script src="../js/jquery-3.7.1.js"></script>

<body>
    <div id="app">
        <h1 id="h1_text">h1的文字内容</h1>
        <hr>
        <span title="你好你好你好你好" id="sp">
            鼠标悬停几秒查看此处动态绑定的提示信息！
        </span>
        <hr>
        <ol>
            <li>

            </li>
        </ol>
        <hr>
        <p id="p1">一二三四五</p>
        <button id="button1">反转文本及控制显示</button>
        <p id="p2">你现在看到我了</p>
        <hr>
        <p id="a">输入文字在这里跟着变</p>
        <input id="a2" type="text" name="theInputem" value="输入的文字在这里跟着变">

    </div>
</body>
<script>
    //1
    var h1_text = '这是H1的文本内容'
    $("#h1_text").html(h1_text);
    //2
    var span_title = "这是span的title内容"
    $("#sp").attr("title", span_title);
    //3
    var array_todos = [{ text: '学习JavaScrpt' }, { text: '学习jquery' }, { text: '学习VUE' }]
    var l = ''
    for (let i = 0; i < array_todos.length; i++) {
        l += "<li>" + array_todos[i]["text"] + "</li>"
    }
    document.querySelectorAll("ol")[0].innerHTML = l;
    //4
    $("#button1").click(function () {
        var zz = document.getElementById('p1').innerHTML.split('').reverse().join('');
        document.getElementById('p1').innerHTML = zz;
        $("#p2").toggle();
    });
    //5
    $(document).ready(function(){
        $("#a2").on("input",function(){
            $("#a").text($(this).val());
        })
    })
    // document.addEventListener('DOMContentLoaded', function () {
    //     var inp = document.getElementById('a2');
    //     var di = document.getElementById('a');
    //     inp.addEventListener('input', function () {
    //         di.textContent = inp.value;
    //     });
    // });

</script>

</html>